<template>
  <div class="hello">
    <el-form ref="modelForm" :rule="rules" :model="modelForm" label-position="right" label-width="100px">
          <div v-for="(item, index) in modelForm.topic" :key="index">
            <el-collapse>
              <el-collapse-item :key="index">
                  <template v-slot:title="title">
                    第{{ index+1 }}题,题目:{{ item.questionName }}
                  </template>
                <!-- 问题 -->
                <el-form-item
                    :prop="`topic.${index}.type`"
                    :label="`问题${index + 1}类型`"
                    :rules="{ required: true, message: '请选择问题类型', trigger: 'change' }"
                >
                  <el-radio-group v-model="item.type">
                    <el-radio :label="1">单选题</el-radio>
                    <el-radio :label="2">多选题</el-radio>
                    <el-radio :label="3">填空题</el-radio>
                  </el-radio-group>
                </el-form-item>
                <!--              //问题-->
                <el-form-item
                    :prop="`topic.${index}.questionName`"
                    label="问题"
                    :rules="{ required: true, message: '请填写问题', trigger: 'change' }"
                >
                  <el-input v-model.trim="item.questionName" style="width:258px" clearable placeholder="请填写问题" />
                </el-form-item>
                <!-- 答案 -->
                <el-form-item
                    v-for="(opt, idx) in item.answers"
                    v-if="item.type!=3 && item.type!=0"
                    :key="idx"
                    :label="`选项${idx + 1}`"
                    :prop="`topic.${index}.answers.${idx}.choiceText`"
                    :rules="[
                  {  required: true, message: '请输入答案', trigger: 'blur' },
                ]"
                >
                  <el-input v-model.trim="opt.choiceText" style="width:258px" clearable placeholder="请输入答案" />
                  <el-button type="primary" style="margin-left: 20px" @click.prevent="removeDomain(index,idx)">删除</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button v-if="item.type!=3" type="primary" @click="addDomain(index)">新增选项</el-button>
                  <el-button type="primary" @click="removeQuestion(index)">删除题目</el-button>
                </el-form-item>
              </el-collapse-item>
            </el-collapse>
          </div>
      <el-form-item>
        <el-button style="margin-top: 10px" @click="goback" type="primary">返回</el-button>
        <el-button style="margin-top: 10px" @click="addQuestion" type="primary">新增题目</el-button>
        <el-button style="margin-top: 10px" @click="resetForm('modelForm')" type="primary">重置</el-button>
        <el-button style="margin-top: 10px" @click="addSubmit()" type="primary">下一步</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>
<script>
import vuedraggable from 'vuedraggable'
import element from 'element-plus'
import router from "@/router";
export default {
  name: 'designQuestion',
  components: {
    vuedraggable
  },
  data() {
    return {
      index1:0,
      rules: {},
      modelForm: {
        topic: [{

        }]
      }
    }
  },
  methods: {
    goback() {
      router.push('/Questionnaire')
    },
    end(evt) {
      this.$refs.modelForm.clearValidate()
    },
    removeDomain(index, idx) { // 删除选项
      this.modelForm.topic[index].answers.splice(idx, 1)
    },
    removeQuestion(index) {//删除题目
      this.modelForm.topic.splice(index, 1)
    },
    addDomain(index) { // 新增选项
      console.log(index)
      this.modelForm.topic[index].answers.push({ quesCount:index+1,toQuestion:0,choiceText: '' })
      console.log(this.modelForm.topic)
    },
    addQuestion() { // 新增题目
      this.index1++
      console.log(this.index1)
      this.modelForm.topic.push({ type: '', questionName: '', answers: [{ quesCount:this.index1,toQuestion:0,choiceText: '' }] })
      console.log(this.modelForm.topic)
    },
    resetForm(formName) { // 重置
      this.$refs[formName].resetFields()
    },
    addSubmit() {
      this.$refs.modelForm.validate(valid => {
        if (valid) {
          let ans1=[],ans2=[]
          let num=0
          this.modelForm.topic.forEach(function (item) {
            num++
            ans1.push({questionText:item.questionName,questionType:item.type,count:num})
            item.answers.forEach(function (i){
              console.log(i)
              ans2.push({quesCount:num,toQuestion:0,choiceText:i.choiceText})
            })
          })
          this.$cookies.set('modelForm',JSON.stringify(this.modelForm.topic))
          this.$cookies.set('ans1',JSON.stringify(ans1))
          this.$cookies.set('ans2',JSON.stringify(ans2))
          router.push('/SetToQuestion')
        }
      })
    }
  },
  beforeMount() {
    let form = this.$cookies.get('modelForm')
    console.log(form)
    if (form != null){
      this.modelForm.topic = form
      this.index1 = form.length
    }
    else this.modelForm.topic=[]
  },
  mounted() {
    console.log(1)
  }
}
</script>

<style scoped>

</style>
